<template>
  <div class="date-time">
    <div @click="popupClick" class="currentTime">
      {{ currentTime }}
      <van-icon name="arrow-down" />
    </div>
    <van-popup :safe-area-inset-bottom='true' position="bottom" v-model:show="show">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmClick"
        @cancel="cancelClick"
      />
    </van-popup>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import { handleTime} from '@/utils/time'
export default defineComponent({
  props: {

  },
  components: {

  },
  setup() {
     const currentDate = ref(new Date());
     const show = ref(false);
     const ctime=handleTime(new Date())
     const currentTime=ref(ctime)
     const popupClick=()=>{
       show.value=true
     }
     const confirmClick=(value)=>{
       show.value=false
       currentTime.value=handleTime(value)
     }
     const cancelClick=()=>{
       show.value=false
     }

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2070, 10, 1),
      currentDate,
      show,
      popupClick,
      confirmClick,
      currentTime,
      cancelClick
    }

  }
})
</script>

<style scoped lang="less">
.date-time {
  padding: 0 6vw 2vw 6vw;
  .currentTime {
    font-weight: 550;
    font-size: 4.6vw;
  }
}
</style>
